<template>
	<view class="info pb30">
		<view class="top">
			<nav-bar  title="个人资料" :color="afterHeaderOpacity>0.5?'#000':'#fff'" :backgroundColor="'rgba(255,255,255,'+afterHeaderOpacity+')'" :navbarbg="'rgba(255,255,255,'+afterHeaderOpacity+')'"></nav-bar>
			
				<view class="img" >
					<image :src="imgUrl+'er.png'" mode="aspectFit"></image>
				</view>
		</view>
		<view class="cont">
			<view class="item u-flex u-flex-between">
				<view>姓名</view>
				<view class="right"> 
					<input type="text" placeholder="请输入姓名" v-model="name" >
				</view>
			</view>
			<view class="item u-flex u-flex-between">
				<view>性别</view>
				<view class="right">
					<picker @change="bindSexChange" :value="index" :range="sexarray">
						<view class="uni-input" :style="{'color':sex=='请选择'?'#999':'#333'}" >{{sex}}</view>
					</picker>
					<w-icon type="more" color="#999" size="36rpx"></w-icon>
				</view>
			</view>
			<view class="item u-flex u-flex-between">
				<view>生日</view>
				<view class="right u-flex">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input" :style="{'color':date=='请选择生日'?'#999':'#333'}" >{{date}}</view>
					</picker>
					<w-icon type="more" color="#999" size="36rpx"></w-icon>
				</view>
			</view>
			<view class="item u-flex u-flex-between" @click="showMulLinkageThreePicker">
				<view>所在城市</view>
				<view class="right u-flex">
					<view :style="{'color':area=='请选择城市'?'#999':'#333'}">{{area}}</view>
					<w-icon type="more" color="#999" size="36rpx"></w-icon>
				</view>
			</view>
			<view class="item u-flex u-flex-between" @click="showStoreA">
				<view>常去门店</view>
				<view class="right u-flex">
					<view :style="{'color':mendian=='请选择门店'?'#999':'#333'}">{{mendian}}</view>
					<w-icon type="more" color="#999" size="36rpx"></w-icon>
				</view>
			</view>
			<view class="item u-flex u-flex-between" >
				<view>您与谁一起生活</view>
				<view class="right u-flex">
					<picker @change="bindlifeChange" :value="index" :range="lifeArray">
						<view :style="{'color':liveWay=='请选择'?'#999':'#333'}">{{liveWay}}</view>
					</picker>
					<w-icon type="more" color="#999" size="36rpx"></w-icon>
				</view>
			</view>
			<view class="item u-flex u-flex-between" >
				<view>您居住的社区距离东哥门店的距离	</view>
				<view class="right u-flex">
					<picker @change="binddistChange" :value="index" :range="distanceArray">
						<view :style="{'color':distance=='请选择'?'#999':'#333'}">{{distance}}</view>
					</picker>
					<w-icon type="more" color="#999" size="36rpx"></w-icon>
				</view>
			</view>
			<view class="item u-flex u-flex-between" >
				<view>是否已添加店长微信</view> 
				<view class="right u-flex">
					<picker @change="bindifChange" :value="index" :range="addArray">
						<view :style="{'color':addwx=='请选择'?'#999':'#333'}">{{addwx==true?'是':'否'}}</view>
					</picker>
					<w-icon type="more" color="#999" size="36rpx"></w-icon>
				</view>
			</view>
			<picker-area ref="pickerArea" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" ></picker-area>
			
		</view>
		<view class="button" @click="save">
			保存
		</view>	
		<u-popup :show="show" @close="show=false">
			<view class="com">
				<view class="r1">附近门店</view>
				<view class="r2">
					<view v-for="(item,idx) in storeArray" :key="idx" @click="selectStore(idx)" :style="{'background':selectId==idx?'#E6E7E7':'#fff'}">
			
						<view class="r3">
							<view>{{item.storeName}}</view>
							<view>
								距离{{item.distance | tofix}}
								<image :src="imgUrl+'11.png'" mode="widthFix"></image>
								<image :src="imgUrl+'12.png'" mode="widthFix"></image>
							</view>
						</view>
						<view class="r4">
							<image class="img2" :src="imgUrl+'home_site_icon_gray@2x.png'" mode="widthFix">
							</image>
							<view>{{item.fullAddress}}</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import navBar from '@/components/nav-bar.vue'
	import wIcon from '@/components/w-icon.vue'
	import pickerArea from '@/components/picker-area.vue';

	export default{
		components:{
			navBar,
			wIcon,
			pickerArea
		},
		data() {
			return {
				color1:'#999',
				color2:'#999',
				color3:'#999',
				color4:'#999',
				color5:'#999',
				color6:'#999',
				imgUrl:this.imgUrl,
				afterHeaderOpacity:0,
				name:"",
				sexarray:["男","女"],
				sex:"请选择",
				date:"请选择生日",
				cityPickerValueDefault: [1, 0, 1],
				area:"请选择城市",
				province:"",
				city:"",
				district:"",
				mendian:"请选择门店",
				lifeArray:["自住","情侣同住","与父母同住","闺蜜/朋友同住","三/四口之家","其它"],
				liveWay:"请选择",
				distanceArray:["小于1公里","2-3公里","4-5公里","6-10公里","11公里以上"],
				distance:"请选择",
				addArray:["是","否"],
				addwx:"请选择",
				show: false,
				store:"",
				storeArray:[],
				selectId:0,
				infoList:{}
			}
			const currentDate = this.getDate({
				format: true
			})
		},
		filters:{
			tofix(item){
				if(item){
					return item.toFixed(2) + 'km'
				}
			}
		},
		  computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
		onLoad() {
			this.initData();
			
		},
		methods: {
			initData(){
				this.$http.GetMemberInfo({
					
				}).then(res => {
					if(res.code==0){
					if(res.content){
						this.infoList = res.content;
						this.$store.commit('savemyUserInfo',res.content)
						uni.setStorageSync('userInfo',res.content)
						this.name = this.infoList.realName?this.infoList.realName:""
						this.sex = this.infoList.sex?this.infoList.sex:'男';
						this.date = this.infoList.birthday?this.infoList.birthday.split('T')[0]:'请选择生日'
						this.liveWay = this.infoList.liveWay?this.infoList.liveWay:"请选择"
						this.distance = this.infoList.storeDistance?this.infoList.storeDistance:"请选择"
						this.addwx = this.infoList.isAddWeixin?this.infoList.isAddWeixin:"请选择"
						this.mendian = this.infoList.storeName?this.infoList.storeName:"请选择门店"
						if(this.infoList.provice){
							this.area = this.infoList.provice+'-'+this.infoList.city+'-'+this.infoList.district
						}
					}
					}
					
				})
				
				
				
				
				
			},
			bindSexChange(e){
				 this.sex = this.sexarray[e.detail.value]
			},
			bindDateChange(e){
				 this.date = e.detail.value
				 this.color1='#333'
			},
			onConfirm(e) {
				this.area=e.label;
				this.cityPickerValueDefault=e.value;
				this.color2='#333'
			},
			showMulLinkageThreePicker(e) {
				this.$refs.pickerArea.show()
			},
			switchChange(e){//设为默认地址
				let value=e.detail.value;
				let isChecked=value
			},
			bindMendianChange(e){
				this.mendian = this.mendianarray[e.detail.value].text;
				this.color3 = "#333";
			},
			bindlifeChange(e){
				 this.liveWay = this.lifeArray[e.detail.value];
				 this.color4 = "#333";
			},
			binddistChange(e){
				 this.distance = this.distanceArray[e.detail.value];
				 this.color5 = "#333";
			},
			bindifChange(e){
				 this.addwx = this.addArray[e.detail.value];
				 this.color6 = "#333";
			},
			save(){
				
				if(this.name){
					this.infoList.realName = this.name;
				}
				if(this.distance!="请选择"){
					this.infoList.storeDistance = this.distance;
				}
				if(this.area!="请选择城市"){
					let regionArr = this.area.split('-');
					let province = regionArr[0];
					let city = regionArr[1];
					let county = regionArr[2];
					this.infoList.provice = province
					this.infoList.city = city;
					this.infoList.district = county;
				}
				if(this.sex!="请选择"){
					this.infoList.sex = this.sexarray[this.index];
				}
				if(this.sex!="请选择生日"){
					this.infoList.birthday = this.date
				}
				if(this.liveWay!="请选择"){
					this.infoList.liveWay = this.liveWay;
				}
				if(this.mendian!="请选择门店"){
					this.infoList.storeName = this.mendian;
					this.infoList.storeId = this.store.storeId; 
				}
				if(this.addwx!="请选择"){
					this.infoList.isAddWeixin = this.addwx=='是'?true:false;
				}
				console.log(this.infoList)
				var that = this
				if(!this.name||this.distance=="请选择"||this.area=="请选择城市"||this.liveWay=="请选择"||this.mendian=="请选择门店"||this.sex=="请选择"){
					uni.showModal({
						content:"您还有资料未填写完成，确认提交吗",
						success:(res)=> {
							if(res.confirm){
								that.$http.SaveMemberInfo(that.infoList).then(res => {
									if(res.code==0){
										that.goTo("/pages/index/index?page=my")
									}else{
										uni.showToast({
											title:res.msg,
											icon:"none"
										})
									}
								})
							}
						}
					})
				}else{
					that.$http.SaveMemberInfo(that.infoList).then(res => {
						if(res.code==0){
							that.goTo("/pages/index/index?page=my")
						}else{
							uni.showToast({
								title:res.msg,
								icon:"none"
							})
						}
					})
				}
				
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getLocation(){
				uni.getLocation({
					type: 'wgs84',
					success: (res) =>{
						this.$http.GetAllStore({
							code:"L68lO1",
							lng:res.longitude,
							lat:res.latitude,
							distance:5000
						}).then(res => {
							this.storeArray = res.content
						
						})
					}
				});
			},
			showStoreA(){
				this.show = true;
				this.getLocation()
				this.color3 = "#333"
			},
			selectStore(index){
				this.store = this.storeArray[index]
				this.show = false;
				this.selectId = index
				this.mendian = this.store.storeName
			}
		}
	}
</script>

<style lang="scss" scoped>
	.img{
		width: 120rpx;
		height: 120rpx;
		margin: 48rpx auto 0;
		border-radius: 50%;
		image{
			width: 100%;height: 100%;
		}
	}
	.top{
		height: 390rpx;
		background: #C2B7A2;
	}
	.cont{
		width: 690rpx;
		margin: 40rpx auto;
		position: relative;
		border-radius: 16rpx;
		background: #fff;
		.item{
			padding: 0 30rpx;
			height:112rpx ;
			line-height: 112rpx;
			border-bottom: 1px solid #f8f8f8;
			&:last-child{
				border-bottom: none;
			}
			.right{
				input{height: 112rpx;line-height: 112rpx;text-align: right;}
			}
		}
		
	}
	.com {
		height: 780upx;
		overflow-y: scroll;
		background: #F8F8F8;
		padding: 30upx 20upx;
		border-radius: 20px 20px 0px 0px;
	
		.r1 {
			font-size: 32upx;
			font-weight: 400;
			color: #222222;
			text-align: center;
		}
	
		.r2 {
			width: 100%;
			border-radius: 20upx;
			margin-top: 20upx;
			overflow-y: scroll;
			height: 660upx;
	
			>view {
				background: #FFFFFF;
				border-radius: 20upx;
				padding: 22upx;
				margin-bottom: 20upx;
	
				.r3 {
					display: flex;
					justify-content: space-between;
	
					align-items: center;
	
					>view:nth-child(1) {
						font-size: 32upx;
						font-weight: 400;
						color: #222222;
					}
	
					>view:nth-child(2) {
						font-size: 22upx;
						font-weight: 400;
						color: #888888;
						display: flex;
						align-items: center;
	
						image {
							width: 44upx;
							height: 44upx;
							margin-left: 40upx;
						}
					}
				}
	
				.r4 {
					font-size: 26upx;
					font-weight: 400;
					color: #888888;
					display: flex;
					margin-top: 18upx;
	
					image {
						width: 30upx;
						flex-shrink: 0;
						margin-right: 15upx;
						height: 30upx;
						margin-top: 8upx;
					}
	
					text {
						display: inline-block;
						width: 500upx;
					}
				}
			}
		}
	
	}
</style>